import { View,Swiper,SwiperItem,Image ,Text,Button} from '@tarojs/components';
import { PureComponent } from 'react';

import Tab from "../Tab";
import NoExploit from "../NoExploit"
import "./index.scss"
import { adsReq } from "@/common/api";
import { connect } from "react-redux"
import Taro from "@tarojs/taro"
import dayjs from "dayjs"
import tools from "@/common/tools"


const FLIGHT_TABS = [
	{
		label: '单程',
		id: 0,
	},
	{
		label: '多程',
		id: 1,
	},
	{
		label: '往返',
		id: 2,
	},
]

@connect(({ flightIndex }) => ({
	flightIndex,
  }))

export default class Flight extends PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			bannerArr :[],
			isExchange: false,
		};
	}


	componentDidMount(){
		this.getAds();
	}

	//获取广告banner
	getAds = ()=>{
		adsReq().then((res)=>{
			console.log("res,",res);
			if(res.code==1 && res.result){
				this.setState({
					bannerArr:res.result
				});
			}
		},(reject)=>{
			console.log("reject,",reject);
		})
	}

	handleTabClick=(id)=>{
		console.log("id 监听",id);
	}

	chooseFlightCity = (type) => {
		this.props.dispatch({
		  type: "flightIndex/updateState",
		  payload: {
			cityType: type,
		  }
		})
		// 注意：使用app.config.js中注册的绝对路径，需要加/
		Taro.navigateTo({
		  url: "/pages/airportList/index"
		})
	  }

	  chooseFlightDate = () => {
		Taro.navigateTo({
		  url: "/pages/calendar/calendar"
		})
	  }

	onLinkToList = () => {
		const {
		  arrCityName,
		  arrCityId,
		  arrAirportName,
		  dptCityId,
		  dptCityName,
		  dptAirportName,
		  dptDate,
		} = this.props.flightIndex;
		tools.navigateTo({
		  url: '/pages/flight/list/list',
		  data: {
			arrCityName,
			arrCityId,
			arrAirportName,
			dptCityId,
			dptCityName,
			dptAirportName,
			dptDate,
		  }
		})
	  }

	render() {
		const { bannerArr, isExchange } = this.state
    	const { arrCityName, dptCityName, dptDate } = this.props.flightIndex
		return (
			<View className='flight-container'>
				<View className='flight-top'>
					<Tab tabList={FLIGHT_TABS} onChange={this.handleTabClick} className='flight-index-tab'>
						<SwiperItem>
						<View className="item station">
                <View
                  className={`cell from ${isExchange ? "slide" : ""}`}
                  onClick={() => this.chooseFlightCity("depart")}
                >
                  {dptCityName}
                </View>
                <Text
                  onClick={this.exchangeCity}
                  className={`icon-zhihuan iconfont ${
                    isExchange ? "active" : ""
                  }`}
                ></Text>
                <View
                  className={`cell to ${isExchange ? "slide" : ""}`}
                  onClick={() => this.chooseFlightCity("arrive")}
                >
                  {arrCityName}
                </View>
              </View>
              <View className="item date" onClick={this.chooseFlightDate}>
                {dayjs(dptDate).format("M月D日")}
              </View>
              <Button className="search-btn" onClick={this.onLinkToList}>
               机票查询
              </Button>
						</SwiperItem>
						<SwiperItem>
							<NoExploit className='no-data' />
						</SwiperItem>
						<SwiperItem>
							<NoExploit className='no-data' />
						</SwiperItem>
					</Tab>
				</View> 
				<View className="alipay-swiper" style={{margin: '15px'}}>
					<Swiper className="advs-banner-bd" autoplay circular interval={3000}>
						{
						bannerArr?.map(item => {
							return (
							<SwiperItem key={item.id} className="item">
								<Image className="img" src={item.imgUrl}></Image>
							</SwiperItem>
							)
						})
						}
					</Swiper>
				</View>
			</View>
		)
	}
}